<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SimpleRAG - 智能知识库</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="styles_dropdown.css" />
  <!-- Markdown Rendering -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <!-- Code Highlighting -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
  <!-- App Container -->
  <div class="app-container">
    
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <div class="logo-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
            <line x1="12" y1="22.08" x2="12" y2="12"></line>
          </svg>
        </div>
        <h1>SimpleRAG</h1>
      </div>

      <nav class="sidebar-nav">
        <button class="nav-item active" data-tab="chat">
          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
          对话
        </button>
        <button class="nav-item" data-tab="config">
          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
          设置
        </button>
        <button class="nav-item" data-tab="files">
          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
          知识库
        </button>
      </nav>

      <div class="sidebar-footer">
        <div class="status-indicator online"></div>
        <span>System Ready</span>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      
      <!-- View: Chat -->
      <section id="view-chat" class="view active">
        <div class="chat-header">
          <div class="mode-switch">
            <button class="mode-btn active" data-mode="rag">RAG 模式</button>
            <button class="mode-btn" data-mode="agent">Agent 模式</button>
          </div>
          <div class="kb-switch">
            <div class="custom-dropdown" id="kb-dropdown">
              <div class="dropdown-trigger" id="kb-trigger">
                <span id="current-kb-name">加载中...</span>
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
              </div>
              <div class="dropdown-menu" id="kb-menu">
                <!-- JS Generated -->
              </div>
            </div>
            <button class="icon-btn" id="refresh-kb" title="刷新知识库列表">
              <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22-4-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
            </button>
          </div>
          <div class="header-actions">
            <label class="toggle-switch">
              <input type="checkbox" id="show-sources" checked>
              <span class="slider"></span>
              <span class="label-text">显示来源</span>
            </label>
            <button class="icon-btn" id="clear-chat" title="清空对话">
              <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
            </button>
          </div>
        </div>

        <div class="chat-history" id="chat-history">
          <!-- Messages will appear here -->
          <div class="welcome-message">
            <h2>👋 欢迎使用 SimpleRAG</h2>
            <p>我可以基于您的本地文档回答问题，或者帮助您执行任务。</p>
          </div>
        </div>

        <div class="chat-input-area">
          <textarea id="chat-input" placeholder="输入您的问题... (Shift+Enter 换行)" rows="1"></textarea>
          <button id="send-btn" disabled>
            <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
          </button>
        </div>
      </section>

      <!-- View: Config -->
      <section id="view-config" class="view">
        <header class="view-header">
          <h2>系统配置</h2>
          <p>修改配置后请点击保存，部分配置需要重启或重建索引生效。</p>
        </header>
        
        <form id="config-form" class="config-grid">
          <!-- Generated by JS -->
        </form>

        <div class="form-actions sticky-bottom">
          <button type="button" id="save-config-btn" class="primary-btn">保存配置</button>
        </div>
      </section>

      <!-- View: Files -->
      <section id="view-files" class="view">
        <header class="view-header">
          <h2>知识库管理</h2>
          <p>上传文档 (PDF, TXT, DOCX, MD) 并构建向量索引，支持多知识库隔离与增量索引。</p>
        </header>

        <div class="kb-toolbar">
          <div class="kb-create">
            <input type="text" id="kb-name" placeholder="新知识库名称，如：项目A" />
            <button id="kb-create-btn" class="primary-btn small">创建知识库</button>
            <button id="kb-migrate-btn" class="action-btn">迁移默认数据</button>
          </div>
          <div class="kb-selector">
            <label for="kb-select-files">当前知识库</label>
            <select id="kb-select-files"></select>
            <button class="action-btn" id="kb-refresh-btn">刷新</button>
          </div>
        </div>

        <div class="kb-panels">
          <div class="kb-list" id="kb-list"></div>
          <div class="kb-files-panel">
            <div class="upload-area" id="drop-zone">
              <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" width="48" height="48"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
              <h3>拖拽文件到此处或点击上传</h3>
              <p>支持多文件批量上传</p>
              <input type="file" id="file-input" multiple hidden>
            </div>

            <div class="file-actions">
              <button id="update-index-btn" class="action-btn">
                增量更新
              </button>
              <button id="rebuild-index-btn" class="action-btn warning">
                重建索引
              </button>
              <button id="delete-index-btn" class="action-btn danger">
                删除知识库
              </button>
            </div>

            <div class="upload-status" id="upload-status"></div>
            <div class="file-list" id="file-list"></div>
          </div>
        </div>
      </section>

    </main>
  </div>

  <!-- Toasts -->
  <div id="toast-container"></div>

  <script src="app.js"></script>
</body>
</html>
